<template>
  <div id="good-detail">
    <!-- 返回按钮区域 -->
    <div class="back" @click="$router.go(-1)">
      <van-icon name="arrow-left" size="22" color="#505050" />
    </div>
    <!-- 轮播图区域 -->
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in banner" :key="item.id">
          <img :src="item.pic" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 商品基本介绍 -->
    <div class="good-info">
      <van-card>
        <template #title>
          <p class="title">{{ goods_info.name }}</p>
        </template>
        <template #desc>
          <p class="char">{{ goods_info.characteristic }}</p>
        </template>
        <template #price>
          <span class="price">低价: ￥{{ goods_info.minPrice }}</span>
        </template>
        <template #num>
          <span class="num">库存: {{ goods_info.stores }}</span>
        </template>
      </van-card>
    </div>

    <!-- 商品详情介绍 -->
    <div class="good-desc">
      <van-tabs v-model="active" line-width="50%" line-height="2px">
        <van-tab title="商品介绍"> </van-tab>
        <van-tab title="商品评价"> </van-tab>
      </van-tabs>
      <div id="good-content" v-show="active == 0" v-html="content"></div>
      <div v-show="active == 1">商品评价信息</div>
    </div>

    <!-- 商品导航的内容 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="nums" @click="$router.push('/m/cart')"/>
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click.native="skuShow = true"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>

    <!-- 商品sku规格校验 -->
    <van-sku @add-cart="addCart" @stepper-change="changeNum" v-model="skuShow" :sku="sku" :goods="goods" :goods-id="id" />
  </div>
</template>

<script>
import {mapGetters} from "vuex";
export default {
  name: "detail",
  data() {
    return {
      active: 0,
      id: 0,
      banner: [], //第一栏轮播图区域
      goods_info: {},
      content: "", //商品介绍内容

      //sku的配置信息
      skuShow: false,
      sku: {
        //sku的属性结构
        tree: [
          {
            k:'颜色111',
            k_s:'c1',
            v:[
              {
                id:1,
                name:'红色'
              },{
                id:2,
                name:'骚粉色'
              },{
                id:3,
                name:'深爱绿'
              }
            ]
          }
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            id:100,
            c1: 1,
            s1: 6,
            price: 100,
            stock_num: 20
          },
           {
            id:100,
            c1: 2,
            s1: 6,
            price: 110,
            stock_num: 10
          },{
            id:100,
            c1:3,
            s1: 6,
            price: 30000,
            stock_num: 120,
          }
        ],
        price: "1.00", // 默认价格（单位元）
        stock_num: 227, // 商品总库存
      },
      goods: {
        // 默认商品 sku 缩略图
        picture: "https://img.yzcdn.cn/1.jpg",
      },
      goods_num:1,
    };
  },
  created() {
    this.id = this.$route.params.id; //接受页面传递的id值
  },
  mounted() {
    console.log("详情页面数据加载.....")
    this.getGoodsInfo();
  },
  methods: {
    //获取商品详情数据
    getGoodsInfo() {
      let url = this.$store.state.mobile.yxUrl;
      this.$axios.get(`${url}/shop/goods/detail?id=` + this.id).then((res) => {
        console.log(res);
        this.banner = res.data.pics; //轮播图
        this.goods_info = res.data.basicInfo; // 商基本品详情信息
        this.content = res.data.content;
        
        //设置sku的方法值
        if(res.data.hasOwnProperty('properties')){
          this.setSku(res.data.properties);
        }
        

       //设置图片样式的逻辑
        this.goods.picture = this.banner[0].pic;
        this.$nextTick(() => {
          let imgs = document.getElementsByClassName("img-lazyload");
          console.log(imgs.length);
          for (let i = 0; i < imgs.length; i++) {
            imgs[i].style.width = "375px";
            imgs[i].style.height = "100%";
          }
        });
      });
    },

    selSku(skuVal){
      console.log(skuVal);
    },
    //设置sku的属性值
    setSku(property){
      console.log(property);
      let tree = [];

      property.forEach(item=>{
        let obj = {
          k: item.name,
          k_s: 'p_'+item.id,
          v: item.childsCurGoods,
        }

        tree.push(obj);
      })
      console.log(tree);
      this.sku.tree = tree;
    },

    changeNum(num){
      console.log(num)
      this.goods_num = num;
    },
    //点击执行加入购物车的操作
    addCart(){
      console.log('testts');
      //判断用户是否登陆
      if(this.$store.state.mobile.token==""){
        this.$dialog.confirm({
          title:'登陆提示',
          message:"你还没有登陆，请登录后再添加购物车吧"
        }).then(()=>{
          this.$router.push('/m/login');
        }).catch(()=>{
          this.$toast('你已经取消登陆');
        })
      }

      //提交vuex的数据，商品的数据提交到vuex中
      //组装商品的数据
      let goods = {
        id: this.id,
        name: this.goods_info.name,
        img: this.goods.picture,
        price: this.goods_info.originalPrice,
        num: this.goods_num,
        checkd: true,
      }
       
      console.log(goods);
      this.$store.commit('mobile/addCart',goods);
      this.$toast.success('加入购物车成功');
      this.skuShow = false;
    }
  },
  computed: {
    ...mapGetters('mobile',{nums:'nums'}),
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
#good-detail {
  width: 100%;
  position: relative;
  background: #f0f0f0;
  .back {
    padding: 10px;
    border: #dddddd 1px solid;
    position: fixed;
    background: #f0f0f0;
    left: 10px;
    top: 10px;
    z-index: 100;
    border-radius: 50%;
    .van-icon {
      margin: 0px;
    }
  }
  .banner {
    width: 100%;
    img {
      width: 100%;
      height: 400px;
    }
  }
  .good-info {
    width: 100%;
    .van-card {
      background: #fff;
      .title {
        font-size: 18px;
      }
      .char {
        color: #dddddd;
        font-size: 14px;
      }
      .price {
        font-size: 16px;
        color: #ff0000;
      }
      .num {
        font-size: 15px;
      }
    }
  }

  .good-desc {
    width: 100%;
    margin-top: 20px;
    background: #fff;

    .van-tabs {
      margin-bottom: 20px;
    }

    #good-content {
      width: 100% !important;
      ul {
        width: 100% !important;
        list-style: none;
        li {
          width: 100% !important;
        }
      }
      p {
        width: 100% !important;
      }
      .img-lazyload {
        width: 100% !important;
      }
    }
  }
}
</style>





